<template>
    <view class="search_container">
        <!-- 搜索框 -->
        <view class="search_content flex" action="/">
            <view class="search flex">
                <view class="search_icon">
                    <icon type="search" size="14"/>
                </view>
                <input class="search_input" placeholder="输入影城名称" type="text" v-model="searchValue" @input="onSearch">
                <view class="search_icon" @click="clearValue">
                    <icon type="clear" size="14"/>
                </view>
            </view>
            <span class="cancel" @click="cancelHandler">取消</span>
        </view>
        <!-- 离你最近 -->
        <view v-if="!searchValue && !filterCinemaList?.length" class="near">
            <view class="title">离你最近</view>
            <view class="near_list flex">
                <span class="near_item" v-for="nearCinema in nearCinemaList" :key="nearCinema.cinemaId">{{ nearCinema.name }}</span>
            </view>
        </view>
        <!-- 空状态 -->
        <!-- 搜索提示 -->
        <van-empty v-if="searchValue && !filterCinemaList?.length">
            <v-slot #image>
                <image
                    class="empty-img"
                    src="https://assets.maizuo.com/h5/v5/public/app/img/rectangle@2x.2bdf0374.png"
                    mode="scaleToFill"
                />
            </v-slot>
            <v-slot #description>
                <p class="empty-title">没有找到匹配的影院</p>
                <p class="empty-tip">提示：仅支持搜索“影院”，建议您检查输入的影院名称是否有误？</p>
            </v-slot>
        </van-empty>
        <!-- 搜索结果 -->
        <view class="search-result-list">
            <view class="search-result-item flex" v-for="allCinema in filterCinemaList" :key="allCinema.cinemaId">
                    <view class="info flex_c">
                        <span class="name">{{ allCinema.name }}</span>
                        <span class="address">{{ allCinema.address }}</span>
                    </view>
                    <view class="price_distance flex_c">
                        <view class="price flex">
                            <i>￥</i>
                            <span class="num">{{ allCinema.lowPrice / 100 }}</span>
                            <i>起</i>
                        </view>
                        <view class="distance">距离{{ allCinema.Distance.toFixed(1) }}km</view>
                    </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import filmService from '@/api/film'
import {onLoad,onReachBottom,onPageScroll} from '@dcloudio/uni-app'
import type {AnyObject} from '@/constrain/types'

//定义响应式数据
//搜索框的值
const searchValue = ref()
//最近影院
const nearCinemaList = ref<AnyObject[]>()
//全部影院
const allCinemaList = ref<AnyObject[]>()
//搜索后影院
const filterCinemaList =  ref<AnyObject[]>()

//生命周期函数
onLoad(() => {
    getNearCinemaList()
    getAllCinemaList()
})

//功能函数
//获取城市离你最近影院
const getNearCinemaList = async () => {
    try {
        let result = await filmService.getNearCinemaByCityId()
        nearCinemaList.value = result.data.cinemas
    } catch (error) {
        console.log(error)
    }
}
//获取城市全部影院
const getAllCinemaList = async () => {
    try {
        let result = await filmService.getCinemaByCityId()
      
        allCinemaList.value = result.data.cinemas
     
    } catch (error) {
        console.log(error)
    }
}

//回调函数
//实时搜索
const onSearch = (e:Event) => {
   
    filterCinemaList.value = allCinemaList.value?.filter(item => {
        //所有影院不包括搜索框的值 不要
        if(item.name.indexOf(searchValue.value) == -1 || item.name.indexOf(searchValue.value) == 0){
            return false
        }else{
            return true
        }
    })

}
//点击清空
const clearValue = () => {
    searchValue.value = ''
    filterCinemaList.value = []
}

// 点击取消按钮执行的回调函数
const cancelHandler = () => {
    uni.navigateBack();
}
</script>

<style lang="less" scoped>
.search_container{
    position: relative;
    top: 120rpx;
    padding: 0 20rpx;
    .search_content{
        padding: 20rpx 0;
        align-items: center;
        height: 60rpx;
        border-bottom: 2rpx solid #ededed;
        .search{     
            align-items: center;       
            background: #f4f4f4;
            border-radius: 3%;
            .search_icon{
                text-align: center;
                line-height: 60rpx;
                height: 60rpx;
                width: 60rpx;
                margin-right: 0;
            }
            .search_input{
                font-size: 24rpx;
                height: 60rpx;
                width: 474rpx;
            }
        }
        .cancel{
            font-size: 28rpx;
            width: 140rpx;
            height: 60rpx;
            text-align: center;
            line-height: 60rpx;
        }
    }
    
    .near{
      
        border-bottom: 2rpx solid #ededed;
        margin: 0 auto;
        width: 710rpx;
     
        .title{
            font-size: 26rpx;
            color: #bdc0c5;
            margin: 36rpx 0;
        }
        .near_list{
            flex-wrap: wrap;
            .near_item{
                background: #f8f8f8;
                color: #000;
                font-size: 26rpx;
                padding: 16rpx 24rpx;
           
                height: 28rpx;
                line-height: 28rpx;
                margin-bottom: 20rpx;
                margin-right: 20rpx;
            }
        }
    }
    .empty-img{
        position: relative;
        top: 160rpx;
        left: 80rpx;
        width: 160rpx;
        height: 160rpx;
    }
    .empty-title{
        font-size: 28rpx;
        text-align: center;
    }
    .empty-tip{
        font-size: 24rpx;
        text-align: center;
    }
    .search-result-list{
      width: 710rpx; 
      .search-result-item{
        width: 710rpx;
        height: 90rpx;
        padding: 30rpx 0;
        border-bottom: 2rpx solid #ededed;
        justify-content: space-between;
        .info{
            width: 560rpx;
            .name{
                font-size: 30rpx;
                color:#000;
            }
            .address{
                font-size: 24rpx;
                color:#797d82;
                margin-top: 10rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        .price_distance{
            width: 130rpx;
            color: #ff5f16;
            font-size: 24rpx;
            .price{
                align-items: center;
                .num{
                    font-size: 30rpx;
                    font-weight: 400;
                }
            }
            .distance{
                color: #797d82;
                margin-top: 10rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
      }
    }
}
</style>